<template>
  <div>
    <el-row :gutter="10" class="linkShowSearchCondition">
      <el-col :span="6" style="width:350px;">
        <div style="width:70px;display:inline-block;">{{$t('起始日期：')}}</div>
        <el-date-picker v-model="record.startTime" clearable type="datetime" style="width:215px;margin-bottom:10px;" value-format='yyyy-MM-dd HH:mm:ss' size='small' :placeholder="$t('选择起始日期时间')">
        </el-date-picker>
      </el-col>
      <el-col :span="6" style="width:350px;">
        <div style="width:70px;display:inline-block;">{{$t('结束日期：')}}</div>
        <el-date-picker v-model="record.endTime" clearable type="datetime" style="width:215px;margin-bottom:10px;" value-format='yyyy-MM-dd HH:mm:ss' size='small' :placeholder="$t('选择结束日期时间')">
        </el-date-picker>
      </el-col>
      <el-col :span="6" style="width:350px;">
        <div style="width:70px;display:inline-block;">{{$t('所属模块：')}}</div>
        <el-select v-model="record.mode" filterable clearable :placeholder="$t('请选择')" style="margin-bottom:10px;" size='small'>
          <el-option v-for="item in modesList" :key="item.name" :label="item.chinese_name" :value="item.name">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" style="width:350px;">
        <div style="width:70px;display:inline-block;">{{$t('日志级别：')}}</div>
        <el-select v-model="record.level" filterable clearable :placeholder="$t('请选择')" style="margin-bottom:10px;" size='small'>
          <el-option v-for="(item, key) in levelList" :key="key" :label="item" :value="key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" style="width:350px;">
        <div style="width:70px;display:inline-block;">{{$t('事件类型：')}}</div>
        <el-input v-emoji v-model="record.eventType" style="width:215px;margin-bottom:10px;" size='small'></el-input>
      </el-col>
      <el-col :span="6" style="width:350px;">
        <div style="width:70px;display:inline-block;">{{$t('事件动作：')}}</div>
        <el-input v-emoji v-model="record.eventAction" style="width:215px;margin-bottom:10px;" size='small'></el-input>
      </el-col>
      <el-col :span="6" style="width:350px;">
        <div style="width:70px;display:inline-block;">{{$t('源地址：')}}</div>
        <el-input v-emoji v-model="record.srcIp" style="width:215px;margin-bottom:10px;" size='small'></el-input>
      </el-col>
      <el-col :span="6" style="width:350px;">
        <div style="width:70px;display:inline-block;">{{$t('目的地址：')}}</div>
        <el-input v-emoji v-model="record.dstIp" style="width:215px;margin-bottom:10px;" size='small'></el-input>
      </el-col>
    </el-row>
    <div class="AuxiliarybuttonBox">
      <el-button type="success" size='small' @click="listData('init')" class="finds">{{$t('搜索')}}</el-button>
      <el-button type="danger" size='small' @click="clearListData" class="clearListData">{{$t('清空日志')}}</el-button>
      <el-button type="success" size='small' @click="exportSearchData()" class="exportSearch">{{$t('导出日志')}}</el-button>
    </div>
    <el-table ref="multipleTable" size='mini' :data="tableList" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="TIME" align='center' :label="$t('时间')" min-width="150">
        <template slot-scope="scope">
          <tooltip :copyText="timeFormatter(scope.row)" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="MODE" align='center' :label="$t('模块')" min-width="80">
        <template slot-scope="scope">
          <tooltip :copyText="modeListShow(scope.row.MODE)" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="LEVEL" align='center' :label="$t('级别')" min-width="80">
        <template slot-scope="scope">
          <tooltip :copyText="levelList[scope.row.LEVEL]" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="SIP" align='center' :label="$t('源地址')" min-width="150">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.SIP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="MSG" align='center' :label="$t('信息')" min-width="400">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.MSG" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="record.page" :page-size="record.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <save-dialog v-if="saveDialogVisible" ref="refSaveDialogVisible"></save-dialog>
  </div>
</template>

<script>

import { searchDpLog, cleanDpLog, getDpMode } from '@/api/system/log'
import SaveDialog from './components/SaveDialog.vue'
import { getTime } from '@/api/home'
import moment from 'moment'
export default {
  name: 'Datalog',
  components: {
    SaveDialog
  },
  data () {
    return {
      saveDialogVisible: false,
      record: {
        mode: '',
        level: '',
        startTime: '',
        endTime: '',
        srcIp: '',
        dstIp: '',
        eventType: '',
        eventAction: '',
        page: 1,
        limit: 20
      },
      recordCopy: {
        mode: '',
        level: '',
        startTime: '',
        endTime: '',
        srcIp: '',
        dstIp: '',
        eventType: '',
        eventAction: '',
        page: 1,
        limit: 20
      },
      total: 0,
      tableList: [],
      levelList: {
        '1': 'ERROR',
        '2': 'ALERT',
        '3': 'INFO',
        '4': 'DEBUG'
      },
      modesList: null
      // modeList: {
      //   'ips_policy_dp': '入侵防御',
      //   'ip_mac_dp': 'IP-MAC绑定',
      //   'av_policy_dp': '病毒过滤',
      //   'snat_dp': 'SNAT',
      //   'url_filter_dp': 'URL过滤',
      //   'AccessControl_dp': '访问控制',
      //   'attack_defense_dp': '异常报文攻击防御',
      //   'mgmt_defense_dp': '自身防护',
      //   'ddos_defense_dp': 'FLOOD攻击防御',
      //   'run_mode_dp': '测试模式',
      //   'content_filter_dp': '深度过滤',
      //   'dnat_dp': 'DNAT'
      // }
    }
  },
  created () {
    getTime()
    this.listData()
    getDpMode().then(res => {
      if (res.status === 0) {
        this.modesList = res.info
      }
    })
  },
  methods: {
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.record.limit = val
      this.record.page = 1
      this.listData()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.record.page = val
      this.listData()
    },
    listData (data) {
      if (data === 'init') {
        this.record.page = 1
      }
      searchDpLog(this.record).then(res => {
        if (res.status === 0) {
          this.tableList = res.info.data
          this.total = res.info.count
        }
      })
    },
    dialogVisible () {
      this.saveDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refSaveDialogVisible.init()
      })
    },
    clearListData () {
      cleanDpLog().then(res => {
        if (res.status === 0) {
          this.$message({
            message: this.$t('清空成功'),
            type: 'success'
          })
          this.listData()
        }
      })
    },
    exportSearchData () {
      this.saveDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refSaveDialogVisible.init(this.record)
      })
    },
    timeFormatter (data) {
      return moment(new Date(data.TIME * 1000)).format('YYYY-MM-DD HH:mm:ss')
    },
    modeListShow (mode) {
      if (this.modesList) {
        return this.modesList.filter(item => item.name === mode)[0] ? this.modesList.filter(item => item.name === mode)[0].chinese_name : ''
      }
    }
  }
}
</script>
